<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Calendar" %>
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<%@taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <%@include file="/WEB-INF/ibnms/common/base.jsp" %>
    <%@include file="/WEB-INF/ibnms/common/highcharts.jsp" %>
    <title>系统使用情况分析报表</title>
    <style type="text/css">

    </style>
</head>
<body>
<div class="frame">
    <table class="form-table" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width: 300px">
                月份:<input type="text" onclick="WdatePicker({dateFmt: 'yyyy-MM', readOnly: true})"
                          name="FILTER_MONTH" value=""/>
            </td>
            <td>
                <button id="btn-search" type="button"><span class="bnms-btn-search "></span> 查询</button>
            </td>
        </tr>
    </table>
    <div class="frame-head">
        <div class="frame-title">当月模块最多点击数量top10</div>
        <div class="frame-button minus"></div>
        <div id="chartsBox1" class="chartsBox"></div>
    </div>
    <div class="frame-head">
        <div class="frame-title">当月模块最少点击数量top10</div>
        <div class="frame-button minus"></div>
        <div id="chartsBox2" class="chartsBox"></div>
    </div>
    <div class="frame-head">
        <div class="frame-title">当年模块最多点击数量top10</div>
        <div class="frame-button minus"></div>
        <div id="chartsBox3" class="chartsBox"></div>
    </div>
    <div class="frame-head">
        <div class="frame-title">当年模块最少点击数量top10</div>
        <div class="frame-button minus"></div>
        <div id="chartsBox4" class="chartsBox"></div>
    </div>
</div>
</body>
<script>
    $(function () {
        var yearMonth = '<%=new SimpleDateFormat("yyyy-MM").format(new java.util.Date())%>';
        $(":input[name=FILTER_MONTH]").val(yearMonth);
        $("#btn-search").click(function () {
            yearMonth = $(":input[name=FILTER_MONTH]").val();
            var arr=yearMonth.split("-");
            var monthStart = yearMonth + "-01";
            var yearStart = yearMonth.substr(0,4)+"-01-01";
            var monthEnd = yearMonth+"-"+new Date(arr[0],arr[1],0).getDate();

            makeCharts("chartsBox1", "当月模块最多点击数量top10", monthStart, monthEnd, 10);
            makeCharts("chartsBox2", "当月模块最少点击数量top10", monthStart, monthEnd, -10);

            makeCharts("chartsBox3", "当年模块最多点击数量top10", yearStart, monthEnd, 10);
            makeCharts("chartsBox4", "当年模块最少点击数量top10", yearStart, monthEnd, -10);
        });
        $("#btn-search").trigger("click");
    });
    function makeCharts(renderTo, title, startDate, endDate, topN) {
        var filter = {};
        filter["startDate"] = startDate;
        filter["endDate"] = endDate;
        filter["topN"] = topN;
        $.ajax({
            url: '<s:url action="useCountTopNByTimeInterval" namespace="/ibnms/report" />',
            dataType: "json",
            type: "POST",
            data: filter,
            success: function (results) {
                var categories = [];
                var data = [];
                for (var i = 0; i < results.length; i++) {
                    categories.push(results[i].moduleName);
                    data.push(results[i].useCount);
                }
                var series = [];
                series.push({
                    name: "点击数量",
                    data: data
                });
                var chartsOption = getHighChartsOptions(renderTo, title);
                chartsOption.xAxis.categories = categories;
                chartsOption.series = series;
                console.log(chartsOption);

                new Highcharts.Chart(chartsOption);
            },
            error: function () {

            },
            beforeRequest: function () {

            }
        });
    }
    function getHighChartsOptions(renderTo, title) {
        var chartsOption;
        chartsOption = {
            chart: {
                renderTo: renderTo,          //放置图表的容器
                width: 0,                 //图框（最外层）宽(默认800)
                height: 370,                //图框高(默认500)
                plotBackgroundColor: null,   //背景颜色
                plotBorderWidth: null,       //图表的边框大小
                plotBorderColor: null,       //图表的边框颜色
                //backgroundColor: "#AAAAFF",  //图框的背景颜色
                borderColor: "#DDDDFF",        //图框的边框颜色
                borderWidth: 1,              //图框的边框大小
                shadow: true,                 //图框是否使用阴影
                marginTop: 35,                //上下左右空隙(图表跟图框之间)
                defaultSeriesType: 'bar'      //图表类型line, spline, area, areaspline, column, bar, pie , scatter
            },
            title: {
                text: title,
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {},
            yAxis: {
                title: {
                    text: ''
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: ''
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            }
        };
        return chartsOption;
    }
</script>
</html>
